<template>
  <div class="app-container" v-loading="loading">
    <div class="app-top">
      <div style="display: flex; margin-right: 20px">
        <el-select
          @change="selectChange"
          v-model="model.code"
          placeholder="请选择项目类型"
          size="small"
        >
          <el-option
            v-for="item in selectPtCodeProject"
            :value="item.papplication"
            :label="item.pname"
            :key="item.papplication"
          ></el-option>
        </el-select>
        <el-select
          style="margin-left: 20px"
          @change="selectChange"
          v-model="model.courseId"
          placeholder="请选择班级"
          size="small"
        >
          <el-option
            v-for="item in selectCourseByTeacherList"
            :value="item.courseId"
            :label="item.courseName"
            :key="item.courseId"
          ></el-option>
        </el-select>
      </div>
    </div>
    <el-table
      :row-class-name="xxxTableRowClassName"
      v-loading="isLoading"
      :data="Array.isArray(list) ? list : []"
      :header-cell-style="{
        background: 'rgba(61,157,255,0.05)',
        color: '#333333',
      }"
      fit
      highlight-current-row
      @row-click="setCurrentRow"
    >
      <template slot="empty">
        <span>暂无数据</span>
      </template>
      <el-table-column
        v-for="(header, index) in headers"
        :key="index"
        :label="header.label"
        :prop="header.prop"
      >
        <template v-if="header.prop === 'stuName'">
          <template slot="label">{{ columnNamesMap[header.prop] }}</template>
        </template>
      </el-table-column>
    </el-table>
    <pagination-page @size="changeSize" @page="changePage" :total="total" />
  </div>
</template>

<script>
import {
  selectCourseByTeacherId,
  selectPtCodeProject,
  selectStuDataListByPidCourseId,
} from "@/api/physicalEducation";
export default {
  data() {
    return {
      columnNamesMap: {
        time: "时间",

        name: "姓名",
        studentName: "姓名",
        speed: "起跳速度",
        jumpHeight: "腾空高度",
        swingArmAngle: "起跳角",
        distance: "距离",
        scores: "分数",
        number: "个数",
        defect: "未过杆",
        incomplete: "未悬垂",
        score: "个数",
        standard: "标准",
        noHoldHead: "未接触到头部",
        noLiefLat: "未平躺",
        noTouchKnee: "未接触到膝盖",
        sitUpScore: "总数",
      },
      headers: [],
      list: null,
      isLoading: false,
      loading: false,
      value: false,
      item: {},
      model: {
        pageSize: 10,
        pageNumber: 1,
        courseId: null,
        code: null,
      },
      total: -1,
      studentMessage: {},
      selectPtCodeProject: [],
      selectCourseByTeacherList: [],
    };
  },
  created() {
    this.getSelectPtCodeProject();
    this.getSelectCourseByTeacherId();
  },

  methods: {
    getSelectPtCodeProject() {
      this.loading = true;
      selectPtCodeProject({}).then((response) => {
        this.loading = false;
        if (response.code === 200) {
          if (response.result.length) {
            this.selectPtCodeProject = response.result;
            this.model.code = response.result[0].papplication;
            this.fetchData();
          } else {
            this.$message.error("暂无数据");
          }
        }
      });
    },
    getSelectCourseByTeacherId() {
      this.loading = true;
      selectCourseByTeacherId({}).then((response) => {
        this.loading = false;
        if (response.code === 200) {
          if (response.result.length) {
            this.selectCourseByTeacherList = response.result;
            this.model.courseId = response.result[0].courseId;
            this.fetchData();
          } else {
            this.$message.error("暂无数据");
          }
        }
      });
    },
    xxxTableRowClassName({ row, rowIndex }) {
      if (rowIndex % 2 !== 0) {
        return "statistics-warning-row";
      } else {
        return "";
      }
    },

    selectChange() {
      this.model.pageNumber = 1;
      this.fetchData();
    },

    changeSize(size) {
      this.model.pageSize = size;
      this.fetchData();
    },

    changePage(page) {
      this.model.pageNumber = page;
      this.fetchData();
    },

    setCurrentRow(row) {
      this.studentMessage = row;
    },

    async fetchData() {
      this.isLoading = true;
      const result = await selectStuDataListByPidCourseId({
        ...this.model,
      });

      if (result.code === 200) {
        let showColumns = [
          "name",
          "studentName",

          "time",
          "speed",
          "jumpHeight",
          "swingArmAngle",
          "distance",
          "scores",
          "number",
          "incomplete",
          "defect",
          "standard",
          "score",
          "noLiefLat",
          "noHoldHead",

          "noTouchKnee",
          "sitUpScore",
        ];
        const dynamicColumns = showColumns.reduce((acc, column) => {
          if (Object.keys(result.result.data[0] || {}).indexOf(column) > -1) {
            acc.push({
              label: this.columnNamesMap[column],
              prop: column,
            });
          }
          return acc;
        }, []);

        this.headers = dynamicColumns;

        this.list = result.result.data;
        this.total = result.result.total;
      }
      this.isLoading = false;
    },

    getAge(date) {
      if (!date) return "";
      const birthTime = new Date(date);
      const now = new Date();
      let age = now.getFullYear() - birthTime.getFullYear();
      if (
        now.getMonth() < birthTime.getMonth() ||
        (now.getMonth() === birthTime.getMonth() &&
          now.getDate() < birthTime.getDate())
      ) {
        age--;
      }
      return age;
    },
  },
};
</script>

<style scoped lang="scss">
.app-top {
  display: flex;
  justify-content: space-between;

  margin-bottom: 30px;
}
::v-deep .el-table__body-wrapper .statistics-warning-row {
  background: rgba(61, 157, 255, 0.05);
}
</style>
